<template>
	<view @touchstart="drag_start" @touchmove="drag_hmove">
		<view class="ball" :style="'left:'+moveX+'px;top :'+moveY+'px;'" v-if="!colse">{{title}}</view>
		<view class="ball" :style="'left:'+x+'px;top :'+y+'px;'" v-else>{{title}}</view>
	</view>
</template>

<script>
	export default {
		name:"DrageBall",
		props: {
			x: {
				type: String
			},
			y: {
				type: String
			},
			title: {
				type: String
			}
		},
		data() {
			return {
				start: [0, 0],
				moveY: 200,
				moveX: 200,
				colse: false
			}
		},
		methods: {
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
				this.colse ? this.colse = false : this.colse;
			}
		}
	}
</script>

<style lang="less">
	.ball {
		width: 70rpx;
		height: 70rpx;
		background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
		border-radius: 50%;
		box-shadow: 0 0 15rpx #87CEFA;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
	}
</style>
